<template>
  <div class="file-preview flex justify-between items-center">
    <div class="left">
      <slot name="extend"></slot>
      <a-tooltip class="item" effect="dark" :content="file.fileName || file.name" placement="top">
        <span :title="file.name">{{ file.name }}</span>
        <a-image
          :width="200"
          :style="{ display: 'none' }"
          :src="imgSrc"
          :preview="{
            visible,
            onVisibleChange: setVisible
          }"
        />
      </a-tooltip>
    </div>
    <div class="right" :style="{ 'min-width': showDel ? '130px' : '100px' }">
      <a-button
        v-if="showPreview"
        type="link"
        style="padding: 5px"
        @click="useUploadAndPreview.previewFile(file.fileId || file.uid, file.fileName || file.name)"
        >预览</a-button
      >
      <a-button
        v-if="showDownload"
        type="link"
        style="padding: 5px"
        @click="
          useUploadAndPreview.downloadFileApi2({
            fileId: file.fileId || file.uid,
            fileName: file.fileName || file.name,
            addWatermarkFlag,
            operationType
          })
        "
        >下载</a-button
      >
      <a-button v-if="showDel" type="link" style="padding: 5px" danger @click="emits('del-file')">删除</a-button>
      <slot name="btns"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { getAppEnvConfig } from '@/utils/env'
import { UploadAndPreview } from '@@/components/uploadAndPreview/index'
const { VITE_GLOB_API_URL } = getAppEnvConfig()
const useUploadAndPreview = new UploadAndPreview(VITE_GLOB_API_URL)

const emits = defineEmits(['del-file', 'download'])

const { file, addWatermarkFlag, operationType } = defineProps({
  file: {
    type: Object,
    default: () => {}
  },
  showDel: {
    type: Boolean,
    default: false
  },

  addWatermarkFlag: {
    type: Boolean,
    default: true
  },
  showDownload: {
    type: Boolean,
    default: true
  },
  showPreview: {
    type: Boolean,
    default: true
  },
  kkFileViewBase: {
    type: String,
    default: ''
  },
  operationType: {
    type: String,
    default: ''
  },
  test: {
    type: String,
    default: ''
  },
  env: {
    type: String,
    default: 'test'
  }
})
const imgSrc = ref('')
const visible = ref<boolean>(false)
const setVisible = (value): void => {
  visible.value = value
}
</script>

<style lang="less" scoped>
.file-preview {
  margin: 2px 0;
  .left {
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .right {
    // width: 100px;
    // text-align: right;
    text-align: right;
  }
}
</style>
